<template>
    <section>
        <el-dialog title="发送消息" v-model="dialogVisible" :before-close="handleClose" width="70%">
            <section>
                <el-form ref="form" :model="formData" label-width="120px">
                    <el-form-item label="模板id">
                        <el-input v-model="formData.id"></el-input>
                    </el-form-item>
                    <el-form-item label="模板名称">
                        <el-input v-model="formData.templateName" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="额外参数">
                        <section>
                            <el-button @click="() => formData.params.push('')" type="primary"
                                >新增一个参数</el-button
                            >
                            <template v-for="(user, index) in formData.params" :key="index">
                                <el-input v-model="formData.params[index]"></el-input>
                                <el-button
                                    type="danger"
                                    size="small"
                                    @click="() => formData.params.splice(index, 1)"
                                    >删除</el-button
                                >
                            </template>
                        </section>
                    </el-form-item>
                    <el-form-item label="toUser">
                        <section>
                            <el-button @click="() => formData.toUser.push('')" type="primary"
                                >新增一个用户</el-button
                            >
                            <template v-for="(user, index) in formData.toUser" :key="index">
                                <el-input v-model="formData.toUser[index]"></el-input>
                                <el-button
                                    type="danger"
                                    size="small"
                                    @click="() => formData.toUser.splice(index, 1)"
                                    >删除</el-button
                                >
                            </template>
                        </section>
                    </el-form-item>
                </el-form>
            </section>
            <span slot="footer" class="dialog-footer flex justify-center items-center">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="handleSave">确 定</el-button>
            </span>
        </el-dialog>
    </section>
</template>

<script setup lang="ts">
import { defineExpose, reactive, ref } from 'vue';

import { sendMessage } from '@/api/template';
const formData = reactive({
    templateName: '',
    id: '',
    params: [''],
    toUser: [''],
});
const dialogVisible = ref(false);

const emits = defineEmits(['submit']);
const handleClose = () => {
    dialogVisible.value = false;
};

const handleSave = async () => {
    try {
        const fetchRes = await sendMessage(formData);
        console.log(fetchRes, 1);
        ElMessage.success('成功');
        handleClose();
        emits('submit');
    } catch (e: any) {
        ElMessage.error(e.message);
    }
};

const open = (id, templateName) => {
    formData.templateName = templateName;
    formData.id = id;
    dialogVisible.value = true;
};

const close = () => {
    handleClose();
};
defineExpose({
    open,
    close,
});
</script>
